<template>
  <div>
    <el-form class="login-box" :rules="rules" ref="ruleForm" :model="ruleForm">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="用户帐号" prop="accountNumber">
        <el-input
          v-model="ruleForm.accountNumber"
          placeholder="请输入用户账号"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="用户密码"
        prop="password"
        auto-complete="new-password"
      >
        <el-input
          v-model="ruleForm.password"
          type="password"
          show-password
          placeholder="请输入用户密码"
        ></el-input>
      </el-form-item>
      <el-row type="flex" justify="center">
        <div class="grid-content">
          <el-button type="primary" @click="submitForm" class="login-button"
            >登录</el-button
          >
        </div>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import Common from "../utils/Common.vue";

export default {
  data() {
    return {
   
      ruleForm: {
        accountNumber: "",
        password: "",
      },
      rules: {
        accountNumber: [
          { required: true, message: "请输入用户账号", trigger: "blur" },
        ],
        password: [
          {
            required: true,
            message: "请输入用户密码",
            trigger: "blur",
          },
        ],
      },
    };
  },

  methods: {
    submitForm: function () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          var reg_accountNumber = /^[0-9]{9}$/; //账号判断9位数字
          var reg_passward = /^[a-zA-Z0-9]{6,16}$/; //密码由英文字母和数字组成的6-16位字符
          if (
            reg_accountNumber.test(this.ruleForm.accountNumber) == false ||
            reg_passward.test(this.ruleForm.password) == false
          ) {
            this.$message({
              message: "账号或密码格式错误。",
              type: "error",
            });
          } else {
            this.$axios({
              headers: {
                "Content-Type": "application/x-www-form-urlencoded", // 一定要设置这个头
              },
              method: "POST",
              url: Common.base_url + "/admins/cookies",
              data: this.$qs.stringify({
                // 一定要使用这个 stringify 方法！！！
                accountNumber: this.ruleForm.accountNumber, //判断账号密码是否正确
                password: this.ruleForm.password,
              }),
            }).then((res) => {
              // 请求成功，代表与服务器建立连接
              console.log(res.data);
              console.log("请求成功！");
              if (res.data.resultCode == 200 && res.data.message == "SUCCESS") {
                // 登录成功，跳转到后台
                
                console.log("登录成功！");
                this.$router.push("/admins/global");
                this.Common.loginFlag=true;
               
              } else {
                // 登录失败，弹出提示
                console.log("登录失败！");
                this.$message({
                  message: "账号或密码错误。",
                  type: "error",
                });
              }
            });
          }
        } else {
          console.log("error submit!!");
          this.$message({
            message: "账号或密码不能为空。",
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.el-container {
  height: 100px;
}
.login-box {
  border: 1px solid #dcdfe6;
  width: 350px;
  margin: 120px auto;
  padding: 35px;
  border-radius: 20px;
  box-shadow: 0 0 25px #b8b9bb;
}

.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: #303133;
}
.login-button {
  background: #e6a23c;
  border: white;
}
</style>
